// 向老师提问页面
<template>
	<div id="message">
		<div class="title">问题讨论区</div>
		<div class="wrapper">
			<div class="title1">
				<el-input placeholder="提问标题" v-model="title" clearable>
				</el-input>
			</div>
			<div class="content">
				<el-input type="textarea" :rows="3" placeholder="提问内容" v-model="content" clearable>
				</el-input>
			</div>
			<div class="btn">
				<el-button type="primary" @click="submit()">提交问题</el-button>
			</div>
			<div class="all">
				<ul class="msglist">
					<li class="list" v-for="(data,index) in msg" :key="index">
						<p class="title"> <i class="iconfont icon-untitled33"></i>
						<a @click="QuesToReply(data.questionId,data.questionTitle,data.user.userName,data.questionDate,data.questionContent)">{{data.questionTitle}}</a>
            <span style="float: right;"><img  width="25px" src="../../../static/img/火.png" />{{data.hotQuestion}}</span>
            </p>

          </li>
				</ul>
			</div>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
				 :page-sizes="[4,6,8,10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		// name: 'message'
		data() {
			return {
				flag: false,
				current: 0,
				title: "",
				content: "",
				pagination: { //分页后的留言列表
					current: 1, //当前页
					total: null, //记录条数
					size: 8 //每页条数
				},
				msg: []
			}
		},
		created() {
			this.getMsg()
		},
		methods: {
			getMsg() {
				this.$axios(`/api/getQuestionTL`,{
					params : {
						page : this.pagination.current,
						size : this.pagination.size
					}
				}).then(res => {
					console.log(res.data)
					this.msg = res.data.records
				})
			},
			//改变当前记录条数
			handleSizeChange(val) {
				this.pagination.size = val
				this.getMsg()
			},QuesToReply(id,title,username,date,content){
				this.$router.push({
					path : '/messageComment',
					query: {
						questionId : id,
						questionTitle : title,
						username : username,
						date : date,
						content : content
					}
				})
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val
				this.getMsg()
			},
			submit() {
				let date = new Date()
				if (this.title.length == 0 || this.content.length == 0) { //非空判断
					this.$message({
						type: 'error',
						message: '留言标题或内容不能为空',
					})
				} else {
					this.$axios({
						url: "/api/insertQuestion",
						method: "post",
						data: {
							questionTitle: this.title,
							questionContent: this.content,
              user: {
                userId: this.$cookies.get("cid")
              }
						}
					}).then(res => {
						let code = res.data.code
						if (code == 200) {
							this.$message({
								type: "success",
								message: "问题发布成功"
							})
						}
						this.getMsg()
					})
				}
				this.title = ""
				this.content = ""
				this.getMsg()
			}
    }
	}
</script>

<style lang="scss" scoped>
	.pagination {
		display: flex;
		justify-content: center;
	}

	#message {
		width: 980px;
		margin: 0 auto;
	}

	.title {
		margin: 20px;

	}

	.content {
		padding: 20px 0px;
	}

	#message {
		.btn {
			padding-bottom: 20px;
		}

		.all {
			.date {
				color: rgb(80, 157, 202);
				line-height: 45px;
				font-size: 13px;
			}

			.list {
				background-color: #eee;
				padding: 10px;
				border-radius: 4px;
				margin: 10px 0px;
				position: relative;
				transition: all .3s ease;
				font-size: 15px;

				.title {
					color: #5f5f5f;
					margin: 0px;
					font-size: 13px;
					line-height: 30px;
				}

				.content {
					padding: 0px;
				}

				.icon-untitled33 {
					font-size: 13px;
					margin-right: 4px;
				}

				.icon-date {
					font-size: 13px;
					margin-right: 4px;
					color: rgb(80, 157, 202);
				}

				.replay {
					position: absolute;
					right: 60px;
					bottom: 15px;
					color: tomato;
					cursor: pointer;
					transition: all .3s ease;
				}

				.el-icon-star-off {
					position: absolute;
					right: 30px;
					size: 20px;
				}

				.comment {
					margin: -7px 0px;
					padding-bottom: 12px;
					font-size: 17px;
					color: #28b2b4;

					i {
						margin-right: 4px;
					}
				}
			}
		}
	}

	#message .wrapper {
		background-color: #fff;
		padding: 20px;

	}
</style>
